<template>
	<view class="shareSel">
		<custom-navi :show-home="false">推荐给朋友</custom-navi>
		<view class="share">
			<view class="share-code">
				<view class="img">
					<tki-qrcode
					    ref="qrcode"
					    :cid="cid"
					    :val="val"
					    :size="size"
					    :unit="unit"
					    :background="background"
					    :foreground="foreground"
					    :pdground="pdground"
					    :icon="icon"
					    :iconSize="iconsize"
					    :onval="onval"
					    :loadMake="loadMake"
					    :usingComponents="usingComponents"
					    :showLoading="showLoading"
					    :loadingText="loadingText"
					    @result="qrR" />
					
				</view>
				<view class="title">
					物联云商餐饮商家版
				</view>
				<view class="edition">
					当前版本号：1.1.0
				</view>
			</view>
			<view class="share-way">
				<view v-for="(item,index) in formData" :key='index' @click="handlePopShare(item)" class="list">
					<view>
						{{item.txt}}
					</view>
					<view class="img">
						<image src="/static/little-more.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {tkiQrcode},
		data(){
			return {
				//*********************************************二维码
				loadMake:true, // 组件初始化完成后自动生成二维码，val需要有值
				cid:'tki-qrcode-canvas', // canvasId，页面存在多个二维码组件时需设置不同的ID
				size:300, // 生成的二维码大小
				unit:'upx', // 大小单位尺寸
				show:true, // 默认使用组件中的image标签显示二维码
				val:'http://cdn.gek6.cn/fr-uni-app-icon/b2.png', // 要生成的内容
				background:'#000000', // 二维码背景色
				foreground:'#ffffff', // 二维码前景色
				pdground:'#ffffff', // 二维码角标色
				icon:'/static/myicon/fcf.png', // 二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconsize:40, // 二维码图标大小
				onval:true, // 监听val值变化自动重新生成二维码
				usingComponents:true, // 是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
				showLoading:true, // 是否显示loading
				loadingText:'二维码生成中	', //loading文字
				//*********************************************二维码
				formData:[
					{txt:'分享到微信好友',src:'',url: '',scene:'WXSceneSession'},
					{txt:'分享到朋友圈',src:'',url: '',scene:'WXSenceTimeline'},
				],

			}
		},
		methods:{
			// base64ImgtoFile(dataurl, filename = 'file') {
			//   let arr = dataurl.split(',')
			//   let mime = arr[0].match(/:(.*?);/)[1]
			//   let suffix = mime.split('/')[1]
			//   let bstr = atob(arr[1])
			//   let n = bstr.length
			//   let u8arr = new Uint8Array(n)
			//   while (n--) {
			//     u8arr[n] = bstr.charCodeAt(n)
			//   }
			//   return new File([u8arr], `${filename}.${suffix}`, {
			//     type: mime
			//   })
			// },
			qrR(e){
				
				// var imgFile = this.base64ImgtoFile(e); 
				// console.log(imgFile)
			},
			handlePopShare(res){
				console.log(res.scene)
				//type 0:图文 1:纯文字 2:纯图片
				// https://uniapp.dcloud.io/api/plugins/share?id=share
				uni.share({
				    provider: "weixin",
				    scene: res.scene,
				    type: 1,
				    summary: "Hailu Simple Shop",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share{
		&-code{
			margin-top: 80rpx;
			text-align: center;
			.img{
				width: 300rpx;
				height: 300rpx;
				margin: 0 auto;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(32,32,32,1);
				opacity:1;
				margin-top: 10rpx;
			}
			.edition{
				font-size:40rpx;
				font-family:PingFang SC;
				font-weight:400;
				line-height:58rpx;
				color:rgba(32,32,32,1);
				opacity:1;
				margin-top: 20rpx;
			}
		}
		&-way{
			margin-top: 84rpx;
			.list{
				height: 100rpx;
				padding: 0 32rpx;
				border-bottom: 1rpx solid rgba(217,217,217,1);
				line-height: 100rpx;
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(80,80,80,1);
				background: rgba(255,255,255,1);
				opacity:1;
				view{
					display: inline-block;
				}
				.img{
					float: right;
					width:18rpx;
					height:20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.list:last-child{
				border: none;
			}
		}
	}
</style>
